import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:lx_widgets_library/config.dart';
import 'package:lx_widgets_library/lx_widgets_library.dart';

// Segment数据模型
class SegmentModel {
  String title = "";
  String assetPath = "";
}

class LxSegment extends StatelessWidget {
  // 数据源
  final RxList<SegmentModel> segments;

  // 选中
  final int? index;

  // 字体
  final LxFontWeightEnum? fontWeightEnum;

  // 文字颜色
  final Color? textColor;

  // 线颜色
  final Color? lineColor;

  // 宽/高
  final Size? size;

  // 选中线条的宽/高
  final Size? lineSize;

  // 边距
  final EdgeInsets? edgeInsets;

  // 点击事件
  final Function(int)? onTap;

  // 选中的角标
  final RxInt _selectedIndex = 0.obs;

  LxSegment({
    super.key,
    required this.segments,
    this.index,
    this.fontWeightEnum = LxFontWeightEnum.titleMedium,
    this.edgeInsets,
    this.size,
    this.lineSize,
    this.textColor,
    this.lineColor,
    this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    double width = size?.width ?? context.width;
    double height = size?.height ?? 48.h;
    double lineHeight = lineSize?.height ?? 3.h;
    List<double> lineWidths = segments
        .map((element) => LxTextUtil.computeWidth(
            element.title, fontWeightEnum!.size, height))
        .toList();
    Color tColor = textColor ?? LxWidgetsLibraryService.to.colorType.color6;
    Color lColor = lineColor ?? LxWidgetsLibraryService.to.colorType.color6;
    return Container(
      color: Colors.transparent,
      width: width,
      height: height,
      padding: edgeInsets ??
          EdgeInsets.only(
            left: CONTENT_MARGIN,
            right: CONTENT_MARGIN,
          ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: segments.asMap().keys.map((index) {
          return Obx(
            () => Column(
              children: [
                InkWell(
                  onTap: () {
                    _selectedIndex.value = index;
                    if (onTap != null) {
                      onTap!(index);
                    }
                  },
                  child: SizedBox(
                    height: height - lineHeight,
                    child: Row(
                      children: [
                        Visibility(
                          visible: segments[index].assetPath.isNotEmpty,
                          child: Row(
                            children: [
                              LxColorUtil.imageFilter(
                                Image.asset(
                                  segments[index].assetPath,
                                  package: PACKAGE_NAME,
                                  width: 20.w,
                                  fit: BoxFit.fitWidth,
                                ),
                                index == _selectedIndex.value
                                    ? tColor
                                    : Colors.white,
                              ),
                              SizedBox(width: 4.w),
                            ],
                          ),
                        ),
                        LxText(
                          segments[index].title,
                          fontWeightEnum: fontWeightEnum!,
                          color: _selectedIndex.value == index
                              ? tColor
                              : Colors.white,
                        ),
                      ],
                    ),
                  ),
                ),
                ClipRRect(
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(4.w),
                    bottomRight: Radius.circular(4.w),
                  ),
                  child: Container(
                    color: _selectedIndex.value == index
                        ? lColor
                        : Colors.transparent,
                    width: lineWidths[index] - 12.w,
                    height: lineHeight,
                  ),
                ),
              ],
            ),
          );
        }).toList(),
      ),
    );
  }
}
